<template>
  <div>

	  <myheader></myheader>
	<br><br>
	
	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				用户名：<input type="text" v-model="username">
			</div>
			<br>
			<div>
				密码： <input type="password" v-model="password">
			</div>
			<br>
			<div>
				验证码： <input type="text" v-model="code">
			</div>
			<br>
			<img @click="changeimg" :src="src">
			<br>
			
			<button @click="submit">提交</button>



		</div>
	</section>
	
	<myfooter></myfooter >
	
	
	
	 
    
  </div>
  
</template>


 
<script>
//组件包含 头部 和尾部
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
  data () {
    return {
		//面包屑导航
	  datas:[{'title':'首页',route:{name:'index'}},{title:"注册页面"}],
	

	  msg: "这是一个变量",
	  username:"",
	  password:"",
	  code:"",
	  src:'http://127.0.0.1:8000/code/'
    }
  },
  //定义组件
  components:{
	  'myheader':myheader,
	  'myfooter':myfooter

  },
     
  mounted:function(){

   
  
},
  methods:{
	  //点击切换验证码
	  changeimg:function(){
		  //定义随机数
		  var num = Math.ceil(Math.random()*10);
		  //将图片刷新
		  this.src= this.src + "?code=" + num;


	  },





	  //提交事件
	  submit:function(){
		  //判断
		  if(this.username == ''){
			  this.$Message('用户名不能为空');
			  return false;
		  }
		  if(this.password == ''){
			  this.$Message('密码不能为空');
			  return false;
		  }
		  if(this.code == ''){
			  this.$Message('验证码不能为空')
			  return false
		  }

		  //请求后台接口
		  this.axios({
			  url:"http://127.0.0.1:8000/register/",
			  params:{
				  username:this.username,
				  password:this.password,
				  code:this.code
			  }
		  }).then((res)=>{
			  console.log(res)
			  this.$Message(res.data.message)
			  this.$router.push({path:"/login"})
		  })
		  
		  

	  }

     
  }
}


</script>
 
<style>



</style>